import Ad from '_shared/Ad';
import Example from '_shared/Example';
import PageMeta from '_shared/PageMeta';
import LinkedComponents from '_shared/LinkedComponents';
import { Hidden } from '@material-ui/core';

import * as TimeValidation from './TimeValidation.example';
import * as BasicTimePicker from './BasicTimePicker.example';
import * as TimePickers from './TimePickers.example';
import * as StaticTimePicker from './StaticTimePicker.example';
import * as SecondsTimePicker from './SecondsTimePicker.example';

<PageMeta component="TimePicker" />

## Time Picker

Time pickers let user select a single time (in the hours:minutes format).
The selected time is indicated by the filled circle at the end of the clock hand.

<Ad />

#### Basic usage

A time picker should adjust to a user’s preferred time setting, i.e. the 12-hour or 24-hour format.

<Example source={BasicTimePicker} />

#### Responsiveness

The time picker component is designed and optimized for the device it runs on.

- The "Mobile" version works best for touch devices and small screens.
- The "Desktop" version works best for mouse devices and large screens.

By default, the `TimePicker` component uses a `@media (pointer: fine)` media query to determine which version to use.
This can be customized by `desktopModeMediaQuery` prop.

<Example source={TimePickers} />

#### Time Validation

<Example source={TimeValidation} />

#### Static mode

It is possible to render any picker inline. This will be really helpful to build custom popover/modal containers.
For that use `variant="static"`.

<Hidden smDown>
  <Example paddingBottom source={StaticTimePicker} />
</Hidden>

#### Seconds

Seconds input can be used for selection of a precise time point.

<Example source={SecondsTimePicker} />

#### API

<LinkedComponents components={['TimePicker']} />
